<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/7/24
  Time: 11:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>爱购商品详情页</title>
    <link rel="stylesheet" href="${ctx}/static/front/css/reset.css"/>
    <link rel="stylesheet" href="${ctx}/static/front/css/top.css"/>
    <link rel="stylesheet" href="${ctx}/static/front/css/goodsDetail.css"/>
    <link rel="stylesheet" href="${ctx}/static/front/css/footer.css"/>
    <link rel="stylesheet" href="${ctx}/static/front/css/font-awesome-4.7.0/Font-Awesome-master/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="${ctx}/static/iconfont/iconfont.css">
    <script type="text/javascript" src="${ctx}/static/front/js/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="${ctx}/static/js/layui/layui.js"></script>
    <script>
        layui.config({
            base: '${ctx}/static/js/' //此处路径请自行处理, 可以使用绝对路径
        })

        layui.use('layer', function(){
            var layer = layui.layer;
            //增加商品数量
            $(".add").click(function () {
                $("#goodsNum").val(parseInt($("#goodsNum").val()) + 1);
                $(".reduce").css({"backgroundPositionX": "0", "backgroundPositionY": "25px"});
            });
            //减少商品数量
            $(".reduce").click(function () {
                console.log($("#goodsNum").val());
                if ($("#goodsNum").val() > 1) {
                    $("#goodsNum").val(parseInt($("#goodsNum").val()) - 1);
                    $(this).css({"backgroundPositionX": "0", "backgroundPositionY": "25px"});
                }
                if ($("#goodsNum").val() == 1) {
                    $(this).css({"backgroundPositionX": "-24px", "backgroundPositionY": "25px"});
                }

            });
            var timer;
            //点击添加购物车
            $("#addCart").click(function () {
                $.post('${ctx}/front/cartCom/addShopCart',
                    {   userid : "${frontUser.id}",
                        commotidyid : "${commodity.id}",
                        counts : $("#goodsNum").val()
                    },
                    function (data) {
                        if(data==""){
                            clearTimeout(timer);
                            $("#tips").css("display", "inline-block");
                            timer = setTimeout(function () {
                                $("#tips").css("display", "none");
                            }, 1000);
                            parent.layer.msg("添加成功", {icon: 1});
                        }else{
                            parent.layer.msg(data, {icon: 5});
                        }
                    })
            });
        });
    </script>
</head>
<body>
<!--头部-->
<div class="top" id="top">
    <c:if test="${frontUser!=null}">
        <!--头部bar-->
        <div class="top-bar">
            <div class="w1230 top-main">
                <div class="account">
                    <span>${frontUser.username}<i class="fa fa-caret-down"></i></span>
                    <div class="manage">
                        <ul>
                            <li><a href="${ctx}/front/address/goDeliverAddress">收货地址</a></li>
                            <li><a href="${ctx}/front/cart/goBuyerTrade">购物车</a></li>
                            <li><a href="${ctx}/orders/goBuyerTrade">我的订单</a></li>
                            <li><a href="${ctx}/front/frontUser/frontLogOut">退出</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </c:if>
    <c:if test="${frontUser==null}">
        <!--头部bar-->
        <div class="top-bar">
            <div class="w1230 top-bar-main">
                <ul>
                    <li><a href="${ctx}/front/frontUser/goLogin" class="login">登录</a></li>
                    <li><a href="${ctx}/front/frontUser/goRegister" class="register">注册</a></li>
                    <li><a href="${ctx}/front/frontUser/goLogin"><i class="fa fa-file-text-o"></i>我的订单</a></li>
                    <li><a href="${ctx}/front/frontUser/goLogin"><i class="fa fa-shopping-cart"></i>购物车</a></li>
                </ul>
            </div>
        </div>
    </c:if>
    <!--logo+搜索-->
    <div class="top-header w1230 clear-float">
        <a href="${ctx}/front/frontUser/goindex" target="_blank" class="logo">
            <img src="${ctx}/static/front/img/logo.png"/>
        </a>
        <div class="top-header-right">
            <!--搜索框-->
            <div class="search clear-float">
                <input type="text" placeholder="牛奶" value="${seek}" class="search-txt"/>
                <a href="" class="search-btn" id="seek">搜索</a>
            </div>
            <!--热搜-->
            <p class="hotkey">
                <c:forEach items="${keywordTop}" var="keyword">
                    <a href="${ctx}/front/keyword/addSeek?seek=${keyword.keyname}">${keyword.keyname}</a>
                </c:forEach>
            </p>
        </div>
    </div>
</div>
<!--导航栏-->
<div class="nav">
    <div class="w1230">
        <div id="all-goods">
            <span class="all-goods">所有商品分类</span>
            <div class="nav-er" id="nav-er">
                <ul>
                    <c:forEach items="${comtypes}" var="comtype">
                        <li>
                            <h3><a href="${ctx}/front/index/clickComtype?comtypeid=${comtype.id}"><i class="iconfont ${comtype.img}"></i>${comtype.name}</a></h3>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--商品详情-->
<div class="w1230 clear-float goods-main">
    <div class="big-img">
        <img src="${ctx}/user/getImage?name=${commodity.img}" style="width: 360px;height: 360px"/>
    </div>
    <div class="goods-detail">
        <h3 class="goods-title">${commodity.name}</h3>
        <p class="price">价格<span>￥${commodity.price}</span></p>
        <p class="store-num">销量：<span>${commodity.sales}件</span></p>
        <div class="update-num">
            <div>
                <input type="text" value="1" id="goodsNum"/>
                <span class="add"></span>
                <span class="reduce"></span>
            </div>
            <a href="" id="addCart" title="添加购物车"><i class="fa fa-shopping-cart"></i>添加购物车</a>
            <span id="tips"><i class="fa fa-check-circle-o"></i>添加成功</span>
        </div>
    </div>
    <!--店家承诺-->
    <div class="promise">
        <h3><i class="fa fa-handshake-o"></i>爱购承诺</h3>
        <p>爱购平台卖家销售并发货的商品，由平台卖家提供发票和相应的售后服务。请您放心购买！
            注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若没有及时更新，请大家谅解！</p>
    </div>
</div>
<!--商品介绍-->
<div class="w1230 clear-float">
    <!--商品推荐-->
    <div class="recommend goods-show">
        <h3>看了本商品的用户最终购买了</h3>
        <ul class="clear-float">
            <c:forEach items="${commodityList}" var="commodity" begin="0" end="9">
                <li><a href="${ctx}/front/index/commodityDetails?commodityId=${commodity.id}">
                    <div class="g-img"><img src="${ctx}/user/getImage?name=${commodity.img}" alt="" width="230px" height="230px"/>
                    </div>
                    <p class="g-title">${commodity.name}</p>
                    <span class="g-price">￥${commodity.price}</span>
                    <span class="g-num">销量:${commodity.sales}</span>
                </a></li>
            </c:forEach>
        </ul>
    </div>
    <!--商品介绍-->
    <div class="goods-des">
        <h3 class="goods-tro">商品介绍</h3>
        <div class="goods-info">
            <ul>
                <c:forEach items="${comimgs}" var="comimg">
                    <li><img src="${ctx}/user/getImage?name=${comimg.img}" alt="${comimg.img}"/></li>
                </c:forEach>
            </ul>
        </div>
    </div>
</div>
<!--脚注-->
<div class="footer">
    <p class="w1230">
        <a href="#">关于爱购</a>
        <a href="#">合作伙伴</a>
        <a href="#">营销中心</a>
        <a href="#">廉正举报</a>
        <a href="#">联系客服</a>
        <a href="#">开发平台</a>
        <a href="#">诚征英才</a>
        <a href="#">联系我们</a>
        <a href="#">网站地图</a>
        <a href="#">知识产权</a><span>|</span>
        <span>&copy;2018-2020 igo.com 版权所有</span>
    </p>
</div>
<script>

</script>
</body>
</html>
